﻿@import "_mixins.scss";

$text-color: white;
$text-font: serif;
$bg-text1: #D392FE;
$bg-text2: #8F1AEF;
$bg-text3: #9215F2;
$bg-text4: #9215F2;

%general-link
{
    text-decoration: none;
    color: $text-color;
    font-family: $text-font;
    &:hover
    {
        text-decoration: underline;
        color: darken($text-color, 25%);
    }
}

%text-link
{
    text-decoration: none;
    color: darken($text-color, 20%);
    font-family: $text-font;
}

%common-radius
{
    border-radius: 12px 12px;
}

body, header, div, img, a, form, label, input, button, nav, ul, li, section, article, h1, p, time, aside, h2, footer
{
    padding: 0;
    margin: 0;
}

body {
    @include linear-gradient($bg-text1, $bg-text2, $bg-text3, $bg-text4);

    > header
    {
        color: $text-color;
        font-family: $text-font;
        margin-top: 30px;
        #logo-container
        {
            float: left;
            padding-left: 13px;
            img
            {
                height: 100px;
                width: 325px;
            }
        }
        #reg-form-container
        {
            float: right;
            padding-right: 80px;
            label
            {
                display: inline-block;
                width: 80px;
                margin: 2px;
            }
            input
            {
                @extend %common-radius;
                margin: 2px;
                border: 1px solid darken($bg-text1, 40%);
                background: darken($bg-text1, 15%);
                padding-left: 6px;
                padding-right: 6px;
             }
             button
             {
                @extend %common-radius;
                width: 80px;
                height: 30px;
                margin: 2px;
                background: darken($bg-text1, 15%); 
                color: $text-color;
                font-weight: bold;
                padding: 5px;
                border: 1px outset #603382;
                &:hover
                {
                    border-style: inset;
                }
             }
        }

        #header-container
        {
            @include clearfix;
        }

        nav
        {
            margin: 20px;
            width: 80%;
            border: 1px solid black;
            @extend %common-radius;
            color: $text-color;
            font-family: $text-font;
            #main-nav-list
            {
                position: relative;
                list-style-type: none;
                > li
                {
                    display: inline-block;
                    > ul
                    {
                        display: none;
                    }
                    &:hover
                    {
                        > ul
                        {
                            background: lighten($bg-text2, 10%);
                            opacity: 0.9;
                            @extend %common-radius;
                            list-style-type: none;
                            display: inline-block;
                            position: absolute;
                            top: 40px;
                            left: 60px;
                            > li
                            {
                                margin-left: 5px;
                                margin-right: 5px;
                                border-bottom: 1px solid black;
                            }
                        }
                    }
                }
                li
                {
                    padding: 12px;
                    a
                    {
                        @extend %general-link;
                    }
                }
            }
        }
    }
    
    section
    {
        float: left;
        width: 75%;
        color: $text-color;
        font-family: $text-font;
        article
        {
            margin: 20px;
            padding: 12px;
            border: 1px solid black;
            @extend %common-radius;
            header
            {
                padding: 5px;
            }
            > footer 
            {
                text-align: right;
                a
                {
                    @extend %text-link;
                }
            }
        }
    }
    aside
    {
        margin-top: 20px;
        float: left;
        width: 20%;
        color: $text-color;
        font-family: $text-font;
        > ul
        {
            > li
            {
                padding: 12px;
                border: 1px solid black;
                @extend %common-radius;
                h2
                {
                    margin-bottom: 8px;
                }
                > ul
                {
                    padding-left: 10px;
                    >li 
                    {
                        padding-left: 30px;
                        background: url('images/li-dot.png') no-repeat left center;
                    }
                }
            }
        }
        ul
        {
            list-style-type: none;
        }
        a
        {
            @extend %text-link;
        }
        strong, em
        {
            font-style: nornal;
            color: darken($text-color, 15%);
        }
    }
    > footer 
    {
        clear: both;
        color: $text-color;
        font-family: $text-font;
        text-align: center;
        margin-bottom: 30px;
    }
}
